<template>
  <div class="workbench-status-bar">
    <div class="status-left">
      <div class="selection-info">
        <el-tag 
          v-if="selectedCounts.transactions > 0" 
          type="primary" 
          effect="dark"
          size="small"
        >
          流水: {{ selectedCounts.transactions }}
        </el-tag>
        <el-tag 
          v-if="selectedCounts.orders > 0" 
          type="success" 
          effect="dark"
          size="small"
        >
          订单: {{ selectedCounts.orders }}
        </el-tag>
        <span v-if="selectedCounts.transactions === 0 && selectedCounts.orders === 0" class="no-selection">
          未选择任何数据
        </span>
      </div>
    </div>
    
    <div class="status-center">
      <div class="match-stats">
        <span class="stat-item">
          <el-icon class="stat-icon"><SuccessFilled /></el-icon>
          总匹配: {{ matchStats.total }}
        </span>
        <span class="stat-item high-confidence">
          <el-icon class="stat-icon"><SuccessFilled /></el-icon>
          高置信: {{ matchStats.highConfidence }}
        </span>
        <span class="stat-item medium-confidence">
          <el-icon class="stat-icon"><Warning /></el-icon>
          中置信: {{ matchStats.mediumConfidence }}
        </span>
        <span class="stat-item low-confidence">
          <el-icon class="stat-icon"><InfoFilled /></el-icon>
          低置信: {{ matchStats.lowConfidence }}
        </span>
      </div>
    </div>
    
    <div class="status-right">
      <div class="action-buttons">
        <el-button 
          v-if="hasSelections" 
          type="danger" 
          :icon="Delete" 
          size="small" 
          @click="$emit('clear-selection')"
        >
          清除选择
        </el-button>
        <el-button 
          v-if="processing" 
          type="warning" 
          :icon="Loading" 
          size="small" 
          loading
        >
          处理中...
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from '@vue/runtime-core'
import { SuccessFilled, Warning, InfoFilled, Delete, Loading } from '@element-plus/icons-vue'

interface Props {
  selectedCounts: {
    transactions: number
    orders: number
  }
  matchStats: {
    total: number
    highConfidence: number
    mediumConfidence: number
    lowConfidence: number
  }
  processing: boolean
}

const props = defineProps<Props>()
const emit = defineEmits(['clear-selection'])

const hasSelections = computed(() => 
  props.selectedCounts.transactions > 0 || props.selectedCounts.orders > 0
)
</script>

<style scoped lang="scss">
.workbench-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #f5f7fa;
  border-top: 1px solid #e4e7ed;
  font-size: 12px;
  
  .status-left {
    flex: 1;
    
    .selection-info {
      display: flex;
      gap: 8px;
      align-items: center;
      
      .no-selection {
        color: #909399;
      }
      
      :deep(.el-tag) {
        margin-right: 4px;
      }
    }
  }
  
  .status-center {
    flex: 2;
    text-align: center;
    
    .match-stats {
      display: flex;
      justify-content: center;
      gap: 16px;
      
      .stat-item {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #606266;
        
        .stat-icon {
          font-size: 14px;
        }
        
        &.high-confidence {
          color: #67c23a;
        }
        
        &.medium-confidence {
          color: #e6a23c;
        }
        
        &.low-confidence {
          color: #909399;
        }
      }
    }
  }
  
  .status-right {
    flex: 1;
    text-align: right;
    
    .action-buttons {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .workbench-status-bar {
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    
    .status-left,
    .status-center,
    .status-right {
      width: 100%;
      text-align: center;
    }
    
    .status-center {
      .match-stats {
        flex-wrap: wrap;
        gap: 8px;
      }
    }
    
    .status-right {
      .action-buttons {
        justify-content: center;
      }
    }
  }
}
</style>